<template>
  <div>
    <!-- <swiper :list="demo01_list" v-model="demo01_index" @on-index-change="demo01_onIndexChange"></swiper> -->
    <div class="swiper-box">
      <swiper id="homeswiper" :aspect-ratio="600/800">
        <swiper-item class="swiper-demo-img" v-for="(item, index) in demo04_list" :key="index"><img :src="item"></swiper-item>
      </swiper>
    </div>
    <div class="container">
      <div class="searchwrap">
        <section class="tab">
          <div class="block longlease" :class="{ hover: longLease }" @click="longLease = true">
              长租
          </div>
          <div class="block shortlease" :class="{ hover: !longLease }" @click="longLease = false">
              短租
          </div>
        </section>

      </div>

      <ul class="featurelist">
        <li v-for="(items, i) in products" :key="i">
          <router-link to="/roomdetails">
            <div class="house-img-cover">
              <img src="./000bBP4b.jpg" />
            </div>
            <div class="house-ellips"><i class="house-comfort-icon"></i>{{i}}零距离迪斯尼，迪斯尼特价票</div>
            <div class="house-distance">
              <span class="graded">4.9<em class="ide">分</em></span>
              <span class="grade-t">极赞</span>
              <span class="hous-type col-gray">11条评价</span>
              <span class="hous-type">整套</span>
              <span class="hous-type">1室1厅</span>
            </div>
            <div class="house-serve">
              <div class="house-dist">
                <span class="serve">成功率100%</span>
                <span class="serve">确认时长5分钟</span>
                <i class="list-loc-icon"></i>长寿路商业区
              </div>
              <span class="original-price J_price" data-price="465" data-originalprice="465">
                <dfn>¥</dfn>465<em class="rise">起</em>
              </span>
            </div>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { Swiper, GroupTitle, SwiperItem, XButton, Divider } from "vux";

const baseList = [
  {
    url: "javascript:",
    img: require("./1.jpg")
  },
  {
    url: "javascript:",
    img: require("./2.jpg")
  },
  {
    url: "javascript:",
    img: require("./3.jpg"),
    fallbackImg: "https://static.vux.li/demo/3.jpg"
  }
];

const imgList = [
  "http://placeholder.qiniudn.com/800x600/FF3B3B/ffffff",
  "http://placeholder.qiniudn.com/800x600/FFEF7D/ffffff",
  "http://placeholder.qiniudn.com/800x600/8AEEB1/ffffff"
];

const urlList = baseList.map((item, index) => ({
  url: "http://m.baidu.com",
  img: item.img,
  fallbackImg: item.fallbackImg,
  title: `(可点击)${item.title}`
}));

const demoList = imgList.map((one, index) => ({
  url: "javascript:",
  img: one
}));

const only2ClickList = baseList.slice(0, 2).map(item => {
  item.url = "http://m.baidu.com";
  return item;
});

export default {
  components: {
    Swiper,
    SwiperItem,
    GroupTitle,
    XButton,
    Divider
  },
  ready() {},
  methods: {
    getlongLease(n) {
      // !!n ? this.longLease = true : longLease = false
      alert(n);
    },
    onSwiperItemIndexChange(index) {
      console.log("demo item change", index);
    },
    demo01_onIndexChange(index) {
      this.demo01_index = index;
    },
    demo05_onIndexChange(index) {
      this.demo05_index = index;
    },
    demo05_onLoad(id) {
      this.demo05_list = id === 1 ? baseList : demoList;
    },
    demo06_onIndexChange(index) {
      this.demo06_index = index;
    },
    demo07_onIndexChange(index) {
      this.demo07_index = index;
    }
  },
  data() {
    return {
      longLease: true,
      demo01_list: baseList,
      demo02_list: demoList,
      demo03_list: demoList,
      demo04_list: imgList,
      demo05_list: [],
      demo06_list: urlList,
      demo07_list: only2ClickList,
      demo01_index: 0,
      demo02_index: 1,
      demo05_index: 0,
      demo06_index: 0,
      demo07_index: 0,
      products: [1,2,3,4,5,6,7,8,9],
      swiperItemIndex: 1
    };
  }
};
</script>

<style lang="scss" scoped>
body {
  background: #fff;
}
#homeswiper .vux-indicator-right {
  top: 60px;
}
.copyright {
  font-size: 12px;
  color: #ccc;
  text-align: center;
}
.text-scroll {
  border: 1px solid #ddd;
  border-left: none;
  border-right: none;
}
.text-scroll p {
  font-size: 12px;
  text-align: center;
  line-height: 30px;
}
.black {
  background-color: #000;
}
.title {
  line-height: 100px;
  text-align: center;
  color: #fff;
}
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}
.vux-indicator.custom-bottom {
  bottom: 30px;
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
.fadeInUp {
  animation-name: fadeInUp;
}
.swiper-demo-img img {
  width: 100%;
}
.swiper-box {
  position: absolute;
  width: 100%;
  height: 600px;
}
.container {
  padding: 0 10px;
  height: 600px;
  position: relative;
  top: 200px;
}
.searchwrap {
  height: 300px;
  width: 100%;
  background: #fff;
  border-radius: 6px;
}
section.tab {
  border-radius: 6px 6px 0 0;
  z-index: 2;
  width: 100%;
  height: 46px;
  background: rgba(0, 0, 0, 0.6);
}
section.tab .block {
  width: 47%;
  height: 46px;
  line-height: 46px;
  float: left;
  text-align: center;
  color: #fff;
}
section.tab .longlease.hover {
  color: #000;
  height: 50px;
  line-height: 50px;
  width: 53%;
  margin-top: -4px;
  background-image: url("l.png");
  background-size: 100% 100%;
}
/* .shortlease */
section.tab .shortlease.hover {
  color: #000;
  height: 50px;
  line-height: 50px;
  width: 53%;
  margin-top: -4px;
  background-image: url("r.png");
  background-size: 100% 100%;
}
.featurelist li {
  width: 100%;
  padding: 0 0 10px 0;
  background: #fff;
  border-bottom: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  margin: 20px 0 0 0;
  .house-img-cover {
    img {
      width: 100%;
    }
  }
  .house-ellips {
    padding: 6px 0;
    font-size: 0.9rem;
    color: #3c3c3c;
    .house-comfort-icon {
      background: url(../assets/home-sprite5.png) no-repeat;
      background-size: 10rem auto;
      background-position: -2.5rem -11.6rem;
      margin-right: 0.2rem;
      width: 2.1rem;
      height: 0.9rem;
      display: inline-block;
      vertical-align: middle;
      overflow: hidden;
    }
  }
  .house-distance {
    font-size: 0.8rem;
    .graded {
      color: #2dbeb0;
      font-size: 0.8rem;
      line-height: 0.8rem;
    }
    .grade-t {
      color: #2dbeb0;
      padding-right: 0.3rem;
      font-size: 0.7rem;
    }
    .col-gray {
      color: #999;
    }
    .hous-type {
      color: #3c3c3c;
    }
    .serve {
      padding: 0 0 0 8px;
      float: right;
    }
  }
  .house-serve {
    overflow: hidden;
    color: #999;
    font-size: 22px;
    line-height: 22px;
    display: flex;
    .house-dist {
      font-size: 0.8rem;
      width: 270px;
    }
    .original-price {
      flex: 1;
      text-align: right;
      color: #ff6a50;
      dfn {
        font-size: 0.65rem;
        padding-right: 0.2rem;
        font-family: Arial;
      }
      .rise {
        color: #999;
        font-size: 0.55rem;
        padding-left: 0.2rem;
        vertical-align: middle;
        font-style: normal;
        line-height: 1rem;
      }
    }
  }
}
</style>